题 目:Flash MX 2004新特性实例学习

Flash MX 2004的试用版终于可以下载了，它帮助文件中自带的例子很好地反映了2004中新增加的功能。下面我们通过学习这些例子的制作，来熟悉在2004中新增加的功能。这些例子都是从Flash MX 2004的帮助文档中来的。在我的windows2000中的保存路径是C:\Documents and Settings\Administrator\Local Settings\Application Data\Macromedia\Flash MX 2004\en\Configuration\Samples。如果找不到的话，在查找文件中搜索“Samples”就可以找到。
下面我们就来学习Flash MX 2004中激动人心的新特性吧。在每个实例的讲解都分为涉及特性、制作过程、实际用途三个部分。

　　实例一、Accessible Applications

　　一、涉及特性

　　这个实例主要涉及新增组件的应用，以及对组件的编程。在2004中，组件分为Data、Media、UI三大类别。让人惊喜的是在UI类别中差不多已经包括了制作WEB应用所需要的所有组件，以后用Flash制作网页再也不麻烦了。而且通过编程可以对组件进行灵活、全面的控制。

　　二、制作过程

　　1. 按“Ctrl + F8”新建一个Symbol，类型为“Movie Clip”，命名为“display”。将一个“Label”组件拖到此Symbol的场景中，命名为“label”。将此Symbol拖到场景中，命名为“display”。

　　2. 将一个“List”组件拖到场景中，命名为“colorList”，在“label”属性中增加内容“Green”、“Blue”、“Brown”、“Red”、“Orange”、“Purple”。

　　3. 将两个“Text Input”组件拖到场景中，分别命名为“usernameInput” 和“passwordInput”，并设置第二个的属性中的“password”为true。

　　4. 将一个“Button”组件拖到场景中，命名为“submitButton”，设置“Label”属性为“Submit”。

　　5. 将两个“Radio Button”组件拖到场景中，分别命名为“radio_single”和“radio_multiple”，设置“Label”属性为“Single Selection”和“Multiple Selection”。

　　6. 将四个“Label”组件拖到场景中，分别命名为“caption”、“username_label”、“password_label”、“select_label”。分别设置“Text”属性为“Please enter your name”、“First Name:”、“Last Name:”、“Please choose an item:”。

　　7. 按“Ctrl + F8”新建一个Symbol，类型为“Movie Clip”，命名为“arrow_mc”。在此Symbol的场景中绘制一个箭头。将此Symbol拖到场景中，命名为“arrow_mc”。调整场景中的Symbol的布局如图所示。

实例三、Customizing Context Menu

　　一、涉及特性

　　这个实例反映了Flash MX 2004在编程方面的重大改进。其中包括了as文件的应用，系统的_global.$clipboard变量的使用，ContextMenu(menufun) 函数的调用，ContextMenuItem()函数的调用，已经MovieClip.prototype.menu变量的使用。通过这几个函数和变量的操作，就可以轻松地操作Flash Player中的菜单了。

　　二、制作过程

　　1、新建一个Action Script File，命名为“ClipBoard.as”，内容如下：

/* Copyright 2003 Macromedia, Inc. All rights reserved.
The following is Sample Code and is subject to all restrictions
on such code as contained in the End User License Agreement
accompanying this product.
*/

class ClipBoard extends Object{ //注释1

static var $contents:Object; //注释2
static var $operation:String; //注释3

function ClipBoard() {} //注释4

static public function cut(obj) { //注释5
obj._alpha = 50; //注释6
$contents = obj; //注释7
$operation = "cut"; //注释8
}

static public function copy(obj) { //注释9
$contents = obj;
$operation = "copy";
}

static public function paste() { //注释10
if ($operation == "cut") { //注释11
$contents._x = _root._xmouse; //注释12
$contents._y = _root._ymouse;
$contents._alpha = 100; //注释13
$contents = undefined; //注释14
$operation = ""; //注释15

} else if ($operation == "copy") { //注释16
var newdepth = $contents._parent.getNextHighestDepth(); //注释17
var newname = $contents._name + newdepth; //注释18
$contents.duplicateMovieClip(newname, newdepth); //注释19
$contents._parent[newname]._x = _root._xmouse; //注释20
$contents._parent[newname]._y = _root._ymouse;

$contents._alpha = 100;
$contents._parent[newname]._alpha = 100;

} else {
return; //注释21
}
}

public function isEmpty():Boolean { //注释22
if ($contents != undefined) { //注释23
return false;
} else {
return true;
}
}

public function handleMenuCommand(obj, item):Void { //注释24
switch (item.caption) { //注释25
case "Cut object": //注释26
cut(obj);
break;

case "Copy object": //注释27
copy(obj);
break;

case "Paste object": //注释28
paste();
break;
}
}
}

实例四、Device Font Masking

　　一、涉及特性

　　本实例主要涉及遮照效果的制作和Scroll Pane组件的利用，都是一些有趣的特性，跟之前在Flash MX中的制作思路有比较大的不同。初初一看，文本内容都在图库当中，但让人迷惑的是在场景中会显示文本的内容。这就涉及到Scroll Pane组件的属性了。

　　二、制作过程

　　1、按“Ctrl + F8”新建一个Clip，命名为“textClip”，类型为Movie Clip，选取“Export for Action Script”（这个就是文本内容不在场景中，但可以显示在场景中的秘密了），在Identifier中输入“textClip”。在此Clip的场景中用文本工具输入比较多的文本，以便在最后结果中可以明显地看到效果。

　　2、按“Ctrl + F8”新建一个Clip，命名为“Frame”，类型为Movie Clip，用矩形工具绘制一个正方形边框。

　　3、按“Ctrl + F8”新建一个Clip，命名为“mask”，类型为Movie Clip，用矩形工具绘制一个与第二步中的大小差不多的正方形边框，并用填充工具填充为黑色。

　　4、按“Ctrl + F8”新建一个Clip，命名为“maskClip”，类型为Movie Clip，选取“Export for Action Script”，在Identifier中输入“maskClip”。

　　5、在maskClip中，在Time Line中新建一个层，命名为“mask”，将图库中的Frame 拖到此层中，在属性面板上命名为“box”。在“mask”层上面再建一个层，命名为“frame”，将图库中的mask拖到此层，在属性面板上命名为“frame”。在“frame”层上面再建一个层，命名为“actions”，在它的action面板上添加下面的语句：

textClip.setMask(box); // 注释1

this.onEnterFrame = function () { // 注释2
box._x = _root._xmouse - this._parent._x; // 注释3
box._y = _root._ymouse - this._parent._y;
frame._x = _root._xmouse - this._parent._x;
frame._y = _root._ymouse - this._parent._y;
}

　　注释1：将在场景中的box Clip设置为textClip的遮照。从这里也可以看出，现在可以直接在Action Script中创建遮照了。

　　注释2：设置函数，当进入此Movie Clip帧的时候，触发此函数。

　　注释3：设置遮照用的box的位置跟随鼠标移动，frame的位置也跟随移动。

　　6、回到主场景中，将两个Radio Button组件拖到场景中，将其中一个设置参数如下：命名为“rComponents”，data的值为“component”，“Group Name”为radioGroup，“label”为Masking with Components。将另一个设置如下：命名为“rGraphics”，data的值为“graphic”，“Group Name”为radioGroup，“label”为Masking with Graphics。

　　7、将一个Scroll Pane组件拖到场景中，将其参数设置如下：命名为“spMasking”，contentPath为“textClip”，hLineScrollSize为5，hPageScrollSize为20，hScrollPolicy为auto。ScrollDarg为false，vLineScrollSize为5，vPageScrollSize为20，vScrollPolicy为auto。

　　8、在Time Line中新建一个层，命名为“action”，在它的Action面板上增加下面的语句：

/* Copyright 2003 Macromedia, Inc. All rights reserved.
The following is Sample Code and is subject to all restrictions
on such code as contained in the End User License Agreement
accompanying this product.
*/
function switchExample (evt) { //注释1
var choice = evt.target.selectedRadio.data; //注释2
if (choice == "component") { //注释3
spMasking.contentPath = "textClip"; //注释4
spMasking.hScrollPolicy = "on"; //注释5

实例五、News Reader

　　一、涉及特性

　　本实例主要涉及数据绑定和组件的编程。数据绑定是在Flash MX 2004中才有的新功能，据称不用编程，只需设置几个组件的属性，就可以实现与服务器端的数据交互功能，也算是一大突破了。另外，由于在实例中没有提供相应的xml文件，所有字段都要手工输入，所以本实例的制作过程显得有些繁琐，请在制作过程中仔细检查每一个字段。

　　二、制作过程

　　1、从组件面板中拖一个List组件到场景中，命名为“articles”，设置“multipleSelection”为false，“rowHight”为20。

　　2、从组件面板中拖一个TextArea组件到场景中，命名为“title”，各种参数设置不变。

　　3、从组件面板中拖一个Label组件到场景中，命名为“author”，设置“text”为空。

　　4、从组件面板中拖两个TextArea组件到场景中，分别命名为“desc”和“link”，都设置“text”为空。

　　5、从组件面板中拖一个XMLConnector组件到场景中，命名为“feed”，设置参数如下：“URL”为“http://www.macromedia.com/go/devnet_rss”，“direction”为receive。

　　6、用文本工具在场景中输入几处文字，此时的效果如图1所示。

　　7、选取“feed”组件，选取“Component Inspector”中的Schema面板，在results字段下面增加如下的子字段：field name为RDF，data type为object，storage type为complex。

　　8、在RDF字段下面增加如下的子字段：A、field name为xmlns，data type为string，storage type为attribute；B、field name为dc，data type为string，storage type为attribute；C、field name为rdf，data type为string，storage type为attribute；D、fieldname为channel，data type为object，storage type为Complex；E、field name为item，data type为Array，storage type为array。

　　9、在Channel字段下面增加如下的子字段：A、field name为about，data type为string，storage type为attribute；B、field name为title，data type为string，storage type为simple；C、field name为link，data type为string，storage type为simple；D、field name为description，data type为string，storage type为simple；E、field name为date，data type为string，storage type为simple；F、field name为language，data type为string，storage type为simple；G、field name为items，data type为object，storage type为complex。

　　10、在Channel字段的items子字段下面增加子字段：field name为seq，data type为object，storage type为complex；在seq字段下面增加子字段：field name为li，data type为Array，storage type为array；在li字段下面增加子字段：field name为[n]，data type为int，storage type为simple；在[n]字段下面增加子字段：field name为resource，data type为string，storage type为attribute。

　　11、回到RDF字段下面，在item字段下面增加如下子字段：field name为[n]，data type为object，storage type为complex；在[n]字段下面增加如下的子字段：A、field name为about，data type为string，storage type为attribute；B、field name为title，data type为string，storage type为simple；C、field name为link，data type为string，storage type为simple；D、field name为description，data type为string，storage type为simple；E、field name为creator，data type为string，storage type为simple；F、field name为subject，data type为string，storage type为simple；G、field name为date，data type为string，storage type为simple；H、field name为type，data type为string，storage type为simple。此时的Schema面板如图2所示。

实例六、Scriptable Masks Part 2

　　一、涉及特性

　　这里主要涉及的是MovieClip.setMask()的应用和Window组件的应用，都是在Flash MX 2004中才出现的新特性。在实例的制作过程中，要先准备三个差不多大小的图片，而且在制作中，要创建很多的Movie Clip，如果不想全部制作的话，可以用打开图库的方式打开源文件，直接用相应的Clip就是了。

　　二、制作过程

　　1、先准备好三个差不多大小的图片，按Ctrl + F8新建一个Movie Clip，命名为“Angel”，按Ctrl + R，在此Clip的场景中导入一个图片。

　　2、按Ctrl + F8新建一个Movie Clip，命名为“City Scape”，按Ctrl + R，在此Clip的场景中导入一个图片。

　　3、按Ctrl + F8新建一个Movie Clip，命名为“Garden”，按Ctrl + R，在此Clip的场景中导入一个图片。

　　4、在TimeLine中新建一个图层，命名为“Angel”，将图库中的Angel Clip放在此层中，将其命名为angel。

　　5、在TimeLine中新建一个图层，命名为“Garden”，将图库中的Garden Clip放在此层，将其命名为garden。

　　6、在TimeLine中新建一个图层，命名为“Cityscape”，将图库中的City Scape Clip放在此层，将其命名为city。

　　7、接下来制作遮照的Mask层，也有三个效果。按Ctrl + F8，新建一个Graphic，命名为“Triangle”。在该Graphic的场景中用矩形工具和线条工具绘制一个倒三角形。按Ctrl + F8，新建一个Movie Clip，命名为“One Spiral”。在该Clip的场景中用矩形工具绘制一个矩形，将图库中的Triangle拖四次到场景中，如图1所示排列。

实例八、Trace Bitmap Panel

　　一、涉及特性

　　本实例不太复杂，主要涉及组件的应用、对组件的编程和对JavaScript的应用，都是Flash MX 2004中的新特性。

　　二、制作过程

　　1、从组件栏中拖四个Numeric Stepper到场景中，分别设置属性如下：A、命名为start_stp，设置Maximum为10000，设置Minimum为1，step为1，value为100；B、命名为end_stp，设置Maximum为10000，设置Minimum为0，step为1，value为100；C、命名为color_stp，设置Maximum为100，设置Minimum为0，step为1，value为100；D、命名为area_stp，设置Maximum为500，设置Minimum为0，step为1，value为10。

　　2、从组件栏中拖两个Combo Box到场景中，分别设置属性如下：A、命名为curve_cb，设置labels为“[normal, very tight, pixels, smooth, very smooth]”，设置rowCount为5；B、命名为corner_cb，设置labels为“[normal, many corners, few corners]”，设置rowCount为5。

　　3、从组件栏中拖一个Button到场景中，命名为submit_btn，设置Labels为Submit。然后排列所有组件如图1所示。

　　4、在TimeLine中新建一个图层，命名为Actions，在该层的Action面板中增加如下语句：

/* Copyright 2003 Macromedia, Inc. All rights reserved.
The following is Sample Code and is subject to all restrictions
on such code as contained in the End User License Agreement
accompanying this product.
*/
function click() {
var tab = " ";
var asNewLine = "\n";
//注释1
if (start_stp.value == "") {
var startKF_as = "\"\"";
} else {
var startKF_as = start_stp.value;
}
if (end_stp.value == "") {
var endKF_as = "\"\"";
} else {
var endKF_as = end_stp.value;
}
if (color_stp.value == "") {
var threshold_as = "\"\"";
} else {
var threshold_as = color_stp.value;
}
if (area_stp.value == "") {
var minArea_as = "\"\"";
} else {
var minArea_as = area_stp.value;
}
var curveFit_as = _root.curve_cb.value;
var corner_as = _root.corner_cb.value;
//注释2
var str = "var cur_tl = fl.getDocumentDOM().getTimeline();"+"var curFrame, startKF, endKF;"+"var newSel = new Array();"+"try {"+"startKF = eval("+startKF_as+"-1);"+"endKF = eval("+endKF_as+"-1);"+"var threshold = "+threshold_as+";"+"var minArea = "+minArea_as+";"+"var curveFit = \""+curveFit_as+"\";"+"var corner = \""+corner_as+"\";"+"var errorMessage = \"\";"+"function theErrorMessage(msg){"+"if (errorMessage == \"\"){"+"errorMessage = msg;"+"}"+"else{"+"errorMessage += \"\\n\"+msg;"+"};"+"};"+"var thresholdErrorCondition = threshold==\"\" || threshold < 1 || threshold > 500;"+"var minAreaErrorCondition = minArea==\"\" || minArea > 1000 || minArea < 1 ;"+"if(startKF <=-1 || endKF==-1 || thresholdErrorCondition || minAreaErrorCondition){"+"if(startKF == -1){"+"theErrorMessage(\"Please enter a start frame.\");"+"};"+"if(startKF < -1){"+"theErrorMessage(\"The start frame you specified does not exist.\");"+"};"+"if(endKF == -1){"+"theErrorMessage(\"Please enter an end frame.\");"+"};"+"if(endKF < -1){"+"theErrorMessage (\"The end frame you specified does not exist.\");"+"};"+"if(thresholdErrorCondition){"+"theErrorMessage (\"Please enter a value for Threshold between 1 - 500.\");"+"};"+"if( minAreaErrorCondition){"+"theErrorMessage (\"Please enter a value for Minimum Area between 1 - 1000.\");"+"};"+"alert(errorMessage);"+"}"+"else{"+"for (var k=0; k